<script setup lang="ts">
  import { ref, computed } from 'vue'
  import TabHome from '@/components/demo/tab-home.vue'
  import TabPosts from '@/components/demo/tab-posts.vue'
  import TabArchive from '@/components/demo/tab-archive.vue'

  const currentTab = ref('Home')
  const tabs = ref(['Home', 'Posts', 'Archive'])
  const currentTabComponent = computed(() => 'tab-' + currentTab.value.toLowerCase())
</script>

<template>
	<div id="dynamic-component-demo" class="demo">
    <button
       v-for="tab in tabs"
       :key="tab"
       :class="['tab-button', { active: currentTab === tab }]"
       @click="currentTab = tab"
     >
      {{ tab }}
    </button>
    <keep-alive>
      <TabHome v-if="currentTabComponent === 'tab-home'" />
      <TabPosts v-else-if="currentTabComponent === 'tab-posts'"  />
      <TabArchive v-else />
    </keep-alive>
  </div>
</template>

<style lang="scss" scoped>
.demo {
  width: 500px;
  font-family: sans-serif;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
  .tab-button {
    padding: 6px 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #ccc;
    cursor: pointer;
    background: #f0f0f0;
    margin-bottom: -1px;
    margin-right: -1px;
  }
  .tab-button:hover {
    background: #e0e0e0;
  }
  .tab-button.active {
    background: #e0e0e0;
  }
  .demo-tab {
    border: 1px solid #ccc;
    padding: 10px;
  }
}
</style>